<template>
  <div class="page-miH page-bgBack pb32">
    <a-form :form="form" class="forms pt32">
      <a-form-item label="企业名称">
        <a-select
          v-decorator="[
            'companyName',
            {
              rules: [
                {
                  required: true,
                  message: '企业名称不能为空'
                }
              ]
            }
          ]"
          placeholder="请选择"
          @change="onSelect"
        >
          <a-select-option :value="item.id" v-for="item in companyIdArr" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="税务分局">
        <a-select
          show-search
          :filter-option="filterOption"
          v-decorator="[
            'authId',
            {
              rules: [
                {
                  required: true,
                  message: '税务分局不能为空'
                }
              ]
            }
          ]"
          placeholder="请选择"
        >
          <a-select-option :value="item.id" v-for="item in authIdArr" :key="item.id">
            {{ item.responsibleAuthorityName }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="批次名称">
        <a-input
          placeholder="请输入"
          :maxLength="50"
          v-decorator="['orderTitle', { rules: [{ required: true, message: '批次名称不能为空' }] }]"
        />
      </a-form-item>
      <a-form-item label="数据来源月">
        <a-month-picker
          style="width: 100%"
          valueFormat="YYYY-MM"
          placeholder="请选择"
          v-decorator="['orderTitle', { rules: [{ required: true, message: '数据来源月不能为空' }] }]"
        />
      </a-form-item>
      <a-form-item label="月工资表" style="margin-top: -8px">
        <a-select
          show-search
          :filter-option="filterOption"
          v-decorator="[
            'companyId',
            {
              rules: [
                {
                  required: true,
                  message: '月工资表不能为空'
                }
              ]
            }
          ]"
          placeholder="请选择"
        >
          <a-select-option :value="item.id" v-for="item in companyIdArr" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="税款所属月">
        <a-month-picker
          style="width: 100%"
          valueFormat="YYYY-MM"
          placeholder="请选择"
          v-decorator="['orderTitle', { rules: [{ required: true, message: '税款所属月月不能为空' }] }]"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleOk"> 提交 </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { getCompanyUnits } from "../api";
import { getCompanyAuthoritiesListAll } from "../../../api";
export default {
  data() {
    return {
      confirmLoading: false,
      form: this.$form.createForm(this, {}),
      companyIdArr: [],
      authIdArr: []
    };
  },
  created() {
    this.onGetCompanyAuthoritiesListAll();
  },
  methods: {
    async onGetCompanyAuthoritiesListAll() {
      try {
        const { data } = await getCompanyAuthoritiesListAll({
          pageNo: 1,
          pageSize: 1000
        });
        this.companyIdArr = data;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    onSelect(v) {
      this.companyIdArr.some((e) => {
        if (e.id === v) {
          this.authIdArr = e.companyAuthorityList;
          return true;
        }
      });
      setTimeout(() => {
        this.form.setFieldsValue({
          authId: undefined
        });
      });
    },
    async onPostSaveBatchAndDetail(v) {
      try {
        this.confirmLoading = true;
        // const { data } = await postSaveBatchAndDetail(v);
        // this.confirmLoading = false;
        // this.$notification.success({ message: "操作成功" });
        // if (data.failTransferAccountsDetailAddDTOList.length > 0) {
        //   sessionStorage.setItem("paySalaryInfoId", data.transferAccountsBatchVO.id);
        //   this.$emit("upData", data.failTransferAccountsDetailAddDTOList);
        // } else {
        //   this.$router.replace({ name: "applyForInfo", query: { id: data.transferAccountsBatchVO.id } });
        // }
      } catch (err) {
        console.log("error log --> ", err);
        this.confirmLoading = false;
      }
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let companyName = "";
          this.companyIdArr.map((e) => {
            if (e.id === values.companyId) companyName = e.name;
          });
          const selectedListTemp = JSON.parse(JSON.stringify(this.selectedListTemp));
          selectedListTemp.map((e) => {
            delete e.name;
            delete e.isSelected;
          });
          const json = {
            transferAccountsBatchAddDTO: {
              companyId: values.companyId,
              orderTitle: values.orderTitle,
              companyName,
              type: values.type,
              remark: values.remark
            },
            type: values.type,
            transferBuildDetailAddVOList: selectedListTemp
          };

          this.onPostSaveBatchAndDetail(json);
        }
      });
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    }
  }
};
</script>

<style lang="scss" scoped>
.forms {
  width: 400px;
  margin: 0 auto;
  ::v-deep .ant-form-item-label > label {
    font-weight: normal !important;
    color: #55565d !important;
  }
}
</style>
